<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示用户</title>
    <link rel="stylesheet" href="/js/bootstrap.min.css">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
                var user = $("#user");
                var pageNo = 1;
                var ids = null;
                var total = null;
                var wname = null;
                var tele = null;
                var openid = null;

                //设置首页
                $("#first").click(function () {
                    pageNo = 1;
                    show();
                });

                //设置上一页
                $("#prev").click(function () {
                    if (pageNo <= 1)
                        return;
                    pageNo--;
                    show();
                });

                //设置下一页
                $("#next").click(function () {
                    if (pageNo >= total)
                        return;
                    pageNo++;
                    show();
                });

                //设置尾页
                $("#last").click(function () {
                    pageNo = total;
                    show();
                });

                $("#button").click(function () {
                    wname = $("#wname").val();
                    tele = $("#tele").val();
                    openid = $("#openid").val();
                    pageNo = 1;
                    show();
                    return false;
                });

                //展示用户
                function show() {
                    user.find("tr:gt(0)").remove();
                    $.get("/applets/user/page", {
                        "wname": wname,
                        "tele": tele,
                        "openid": openid,
                        "pageNo": pageNo,
                        "pageSize": 5
                    }, function (da) {
                        if (da.code != 0) {
                            alert(da.msg);
                            return;
                        }
                        var map = da.data;
                        total = map.total;
                        $.each(map.list, function (i, d) {
                            user.append("<tr><td>" + d.id +
                                "</td><td>" + d.wname +
                                "</td><td>" + d.tele +
                                "</td><td>" + d.openid +
                                "</td><td>" + d.upass +
                                "</td><td>" + getAdd(d.addrid) +
                                "</td><td>" + getRes(d.inuse) +
                                "</td><td>" + d.nickname +
                                "</td><td><a class='btn btn-primary btn-sm' href='/applets/user/select?id=" + d.id + "'>更新</a>&nbsp;" +
                                "<button type='button' class='btn btn-primary btn-sm' code='" + d.id + "' id='shanchu'>删除</button></td></tr>");
                        })
                    });
                };

                //获得地址
                function getAdd(w) {
                    var address = null;
                    $.ajax({
                        url: "/applets/address/getAdd",
                        type: "post",
                        data: {"addressid": w},
                        async: false,
                        success: function (da) {
                            address = da.data;
                        }
                    });
                    return address;
                };


                function getRes(q) {
                    if (q == true)
                        return "是"
                    return "否"
                }

                show();

                //删除事件
                user.on("click", '#shanchu', function () {
                    ids = $(this).attr("code");
                    del();
                    return false;
                });

                //ajax删除
                function del() {
                    var a = confirm("是否删除该用户?");
                    if (!a)
                        return;
                    $.ajax({
                        url: "/applets/user/delete",
                        data: {"id": ids},
                        type: "post",
                        success: function (ur) {
                            alert(ur.msg);
                        }
                    });
                };
            }
        );
    </script>
</head>
<body>
<div class="container">
    <h2 class="text-center">用户展示</h2>

    <!--导航-->
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="/Menu.html">返回主菜单</a>
        </li>
        <li class="nav-item">
            <a class="nav-link " href="AddUser.html">新增用户</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/applets/user/export">导出数据</a>
        </li>
    </ul>

    <form action="#" method="post">
        <div class="form-group">
            <label>微信号</label>
            <input type="text" name="wname" class="form-control" id="wname">
        </div>
        <div class="form-group">
            <label>手机号</label>
            <input type="text" name="tele" class="form-control" id="tele">
        </div>
        <div class="form-group">
            <label>昵称</label>
            <input type="text" name="openid" class="form-control" id="openid">
        </div>
        <div class="form-group">
            <input type="button" id="button" class="form-control" value="查找用户">
        </div>
    </form>
</div>

<div class="container">
    <table id="user" class="table table-striped">
        <thead>
        <tr>
            <th>ID</th>
            <th>微信号</th>
            <th>手机号</th>
            <th>昵称</th>
            <th>密码</th>
            <th>默认地址</th>
            <th>是否可用</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<div class="container offset-md-5">
    <ul class="pagination">
        <li class="page-item" id="first"><a class="page-link">首页</a></li>
        <li class="page-item" id="prev"><a class="page-link">上一页</a></li>
        <li class="page-item" id="next"><a class="page-link">下一页</a></li>
        <li class="page-item" id="last"><a class="page-link">尾页</a></li>
    </ul>
</div>

</body>
</html>